<template>
    <div class="app-container">
       <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="82px">
          <el-form-item label="设备名称" prop="name">
             <el-input v-model="queryParams.name" placeholder="请输设备名称" clearable style="width: 240px"
                @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="区域名称" prop="areaId">
            <el-tree-select v-model="queryParams.areaCode" :data="areaOptions" clearable style="width: 240px" @change="areaChange" filterable
                  :props="{ label: 'name', children: 'areaList' }" node-key="areaCode" :check-strictly="true"
                  @keyup.enter="handleQuery"
                  placeholder="请选择区域" :render-after-expand="false" default-expand-all  controls-position="right" />
         </el-form-item>
          <el-form-item label="创建时间" style="width: 308px">
             <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
                start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
       </el-form>
       <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
             <el-button type="primary" plain  :disabled="multiple" @click="changeStatusAll(0)" >启用</el-button>
          </el-col>
          <el-col :span="1.5">
             <el-button type="danger" plain  :disabled="multiple" @click="changeStatusAll(1)"
                >禁用</el-button>
          </el-col>
          <!-- <el-col :span="1.5">
             <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                v-hasPermi="['contact:remove']">删除</el-button>
          </el-col> -->
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getRefreshPage"></right-toolbar>
       </el-row>
       <!-- 表格数据 -->
       <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="监控点名称" align="center" prop="deviceName" :show-overflow-tooltip="true" />
          <el-table-column label="IP地址及端口号" align="center" prop="deviceIp" :show-overflow-tooltip="true" />
          <!-- <el-table-column label="硬盘录像机ip" align="center" prop="encodeIp" :show-overflow-tooltip="true" /> -->
          <el-table-column label="监控点类型" align="center" prop="deviceType" :show-overflow-tooltip="true"   >
            <template #default="scope">
                  {{   sys_device_type.find(item => item.value == scope.row.deviceType)?.label }}
            </template>
         </el-table-column>
          <el-table-column label="设备序列号" align="center" prop="deviceSerialNum" :show-overflow-tooltip="true" />
          <el-table-column label="所属设备" align="center" prop="deviceBrand" :show-overflow-tooltip="true" />
          <el-table-column label="所属设备编号" align="center" prop="deviceModel" :show-overflow-tooltip="true" />
          <el-table-column label="通道号" align="center" prop="channelNo" :show-overflow-tooltip="true" />
          <el-table-column label="状态" align="center" >
            <template #default="scope">
               <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
                  @change="handleStatusChange(scope.row)"></el-switch>
            </template>
         </el-table-column>
          <el-table-column label="在线状态" align="center" prop="online" :show-overflow-tooltip="true">
            <template #default="scope">
               <el-tag class="ml-2" v-if="scope.row.online==1" type="success">在线</el-tag>
               <el-tag class="ml-2" v-else type="danger">离线</el-tag>
            </template>
         </el-table-column>
     
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
             <template #default="scope">
                <el-tooltip content="修改" placement="top">
                   <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                      v-hasPermi="['contact:edit']"></el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                   <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                      v-hasPermi="['contact:remove']"></el-button>
                </el-tooltip>
             </template>
          </el-table-column>
       </el-table>
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize" @pagination="getList" />
       <!-- 添加或修改联系人配置对话框 -->
       <el-dialog :title="title" v-model="open" width="500px" append-to-body>
          <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="区域名称" prop="areaCode">
               <el-select  v-model="form.areaCode" @change="areaChange" placeholder="请选择区域名称" controls-position="right">
                  <el-option v-for="item in areaOptions" :key="item.areaCode" :label="item.name" :value="item.areaCode" />
               </el-select>
            </el-form-item>
             <el-form-item label="设备品牌" prop="deviceBrand">
                <el-input v-model="form.deviceBrand" controls-position="right" maxlength="11" />
             </el-form-item>
             <el-form-item label="设备ip" prop="deviceIp">
                <el-input v-model="form.deviceIp" controls-position="right" />
             </el-form-item>
             <el-form-item label="设备型号" prop="deviceModel">
                <el-input v-model="form.deviceModel" controls-position="right" />
             </el-form-item>
             <el-form-item label="设备名称" prop="deviceName">
                <el-input v-model="form.deviceName" controls-position="right" />
             </el-form-item>
             <el-form-item label="设备序列号" prop="deviceSerialNum">
                <el-input v-model="form.deviceSerialNum" controls-position="right" />
             </el-form-item>
             <el-form-item label="设备类型" prop="deviceType">
               <el-select  v-model="form.deviceType"  placeholder="请选择设备类型" controls-position="right">
                  <el-option v-for="item in sys_device_type" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </el-form-item>
             <!-- <el-form-item label="硬盘录像机ip" prop="encodeIp">
                <el-input v-model="form.encodeIp" controls-position="right" />
             </el-form-item> -->
             <el-form-item label="是否启用" prop="status">
                <el-switch v-model="form.status"  :active-value="'0'" :inactive-value="'1'" />
             </el-form-item>
             <el-form-item label="在线状态" prop="status">
                <el-switch v-model="form.status"  :active-value="'1'" :inactive-value="'0'" />
             </el-form-item>
          </el-form>
          <template #footer>
             <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
             </div>
          </template>
       </el-dialog>
    </div>
 </template>
 <script setup name="contact">
 import { page,details,save,update,del,refreshPage,upadteDevicesstatus } from "@/api/device";
 import {treeArea} from '@/api/area.js'
 const router = useRouter();
 const { proxy } = getCurrentInstance();
 const { sys_device_type } = proxy.useDict("sys_device_type");
      const changeStatusAll = (status)=>{
         let text = status == '0' ? "启用" : "禁用";
         proxy.$modal.confirm(`确认要${text}选中项吗?`).then(function () {
               return upadteDevicesstatus({ids:ids.value,status})
            }).then(() => {
               getList();
               proxy.$modal.msgSuccess(text + "成功");
            }).catch(function () {
               row.status = row.status == '0' ? '1' : '0';
            });
      }
   /** 状态修改 */
   function handleStatusChange(row) {
      let text = row.status == '0' ? "启用" : "禁用";
      proxy.$modal.confirm(`确认要${text}吗?`).then(function () {
         return update(row);
      }).then(() => {
         proxy.$modal.msgSuccess(text + "成功");
      }).catch(function () {
         row.status = row.status == '0' ? '1' : '0';
      });
   }

 const roleList = ref([]);
 const open = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
 const dateRange = ref([]);
 const menuExpand = ref(false);
 const menuNodeAll = ref(false);
 const deptExpand = ref(true);
 const deptNodeAll = ref(false);
 const menuRef = ref(null);
 const data = reactive({
    form: {},
    queryParams: {
       pageNum: 1,
       pageSize: 10,
       roleName: undefined,
       roleKey: undefined,
       status: undefined
    },
    rules: {
      areaCode: [{ required: true, message: "区域名称不能为空", trigger: "blur" }],
      deviceName: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
      deviceIp: [{ required: true, message: "设备ip不能为空", trigger: "blur" }],
    },
 });
 
 const { queryParams, form, rules } = toRefs(data);
 
 /** 查询部门下拉树结构 && 查询单位下拉选择 */
 const areaOptions = ref([])

 function getDeptTree() {
   treeArea().then(response=>{
      areaOptions.value = response.data
   })
 };
 
 /** 查询联系人列表 */
 function getList() {
    loading.value = true;
    if (dateRange.value && dateRange.value.length > 0) {
       queryParams.value.createTimeStart = dateRange.value[0]
       queryParams.value.createTimeEnd = dateRange.value[1]
    } else {
       queryParams.value.createTimeStart = undefined
       queryParams.value.createTimeEnd = undefined
    }
    page(proxy.addDateRange(queryParams.value)).then(response => {
       roleList.value = response?.data?.rows;
       total.value = response?.data?.total;
       loading.value = false;
    });
 }

 /** 查询联系人列表 */
 function getRefreshPage() {
    loading.value = true;
    if (dateRange.value && dateRange.value.length > 0) {
       queryParams.value.createTimeStart = dateRange.value[0]
       queryParams.value.createTimeEnd = dateRange.value[1]
    } else {
       queryParams.value.createTimeStart = undefined
       queryParams.value.createTimeEnd = undefined
    }
    refreshPage(proxy.addDateRange(queryParams.value)).then(response => {
       roleList.value = response?.data?.rows;
       total.value = response?.data?.total;
       loading.value = false;
    });
 }

 /** 搜索按钮操作 */
 function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
    dateRange.value = [];
    queryParams.value.createTimeStart = undefined
    queryParams.value.createTimeEnd = undefined
    proxy.resetForm("queryRef");
    handleQuery();
 }
 
 /** 删除按钮操作 */
 function handleDelete(row) {
    const Ids = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除这个设备？').then(function () {
       return del(Ids);
    }).then(() => {
       getList();
       proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
 }
 
 /** 多选框选中数据 */
 function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
 }
 /** 重置新增的表单以及其他数据  */
 function reset() {
    if (menuRef.value != undefined) {
       menuRef.value.setCheckedKeys([]);
    }
    menuExpand.value = false;
    menuNodeAll.value = false;
    deptExpand.value = true;
    deptNodeAll.value = false;
    form.value = {
       id: undefined,
       onlineStatus:'1'
    };
    proxy.resetForm("roleRef");
 }
 
 /** 添加联系人 */
 function handleAdd() {
    reset();
    open.value = true;
    title.value = "添加设备";
 }
 
 /** 修改联系人 */
 function handleUpdate(row) {
    reset();
    details(row.id ||ids.value[0]).then((res) => {
       form.value = res.data;
       open.value = true;
    }).catch(() => {
       form.value = row;
       open.value = true;
    })
    title.value = "告警设备修改";
 }
 
 /** 提交按钮 */
 function submitForm() {
    proxy.$refs["roleRef"].validate(valid => {
       if (valid) {
          if (form.value.id != undefined) {
             update(form.value).then(response => {
                proxy.$modal.msgSuccess("修改成功");
                open.value = false;
                getList();
             });
          } else {
             save(form.value).then(response => {
                proxy.$modal.msgSuccess("新增成功");
                open.value = false;
                getList();
             });
          }
       }
    });
 }
 
 /** 取消按钮 */
 function cancel() {
    open.value = false;
    reset();
 }
 getDeptTree();
 getList();
 </script>
 